<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card"  @tab-click="handleClick" style="height: 100%; width: 100%;" >
      <el-tab-pane label="图表" name="first">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
      <el-form-item label="园所性质" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
          <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="地区类型" prop="nature">
        <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
          <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
        <div class="charts"  >
          <div  class="ranking">
            <el-button type="primary" size="mini" @click="onRanking">排 名</el-button>
          </div>
          <div v-show="analysisDataShow" ref="chartpDom" class="map_dom"></div>
          <div v-show="!analysisDataShow" class="noData">暂无数据，请重新搜索。。。</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <el-form :model="querys" ref="query" :inline="true"  label-width="68px">
      <el-form-item label="园所性质" prop="type">
        <el-select v-model="querys.type" placeholder="请选择园所性质" clearable size="small">
          <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="地区类型" prop="nature">
        <el-select v-model="querys.nature" placeholder="请选择地区类型" clearable size="small">
          <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLb">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLb">重置</el-button>
      </el-form-item>
    </el-form>
        <el-table v-loading="loading" :data="analysislb"  style="height: 100%;width: 100%;">
          <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
            <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
            <el-table-column  align="center" label="园所性质" prop="schoolType" :formatter="schoolTypeFormat"></el-table-column>
             <el-table-column  align="center" label="地区类型" prop="nature"  :formatter="schoolNatureFormat"></el-table-column>
            <el-table-column  align="center" label="国家级"  prop="level1" sortable></el-table-column>
            <el-table-column  align="center" label="省市级" prop="level2" sortable></el-table-column>
            <el-table-column  align="center" label="区县级" prop="level3" sortable></el-table-column>
            <el-table-column  align="center" label="奖项总数" prop="total" sortable></el-table-column>
         </el-table>
         <div style="height: 50px;">
          <pagination v-show="querystotal>0" :total="querystotal" :page.sync="querys.pageNum" :limit.sync="querys.pageSize"
      @pagination="getlbList" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="园所获奖总数排名" :visible.sync="open" width="950px" append-to-body>
      <el-table v-loading="loading" :data="pmData"  style="height: 100%;width: 100%;"  :default-sort = "{prop: 'total', order: 'descending'}">
          <el-table-column type="index" align="center" label="序号" :index="customeIndexPm" width="80"></el-table-column>
            <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
            <!-- <el-table-column  align="center" label="园所性质" prop="schoolType" :formatter="schoolTypeFormat"></el-table-column>
             <el-table-column  align="center" label="地区类型" prop="nature"  :formatter="schoolNatureFormat"></el-table-column> -->
            <el-table-column  align="center" label="国家级"  prop="level1" ></el-table-column>
            <el-table-column  align="center" label="省市级" prop="level2" ></el-table-column>
            <el-table-column  align="center" label="区县级" prop="level3"></el-table-column>
            <el-table-column  align="center" label="奖项总数" prop="total" sortable></el-table-column>
         </el-table>
         <div style="height: 50px;">
          <pagination v-show="pmParamsTotal>0" :total="pmParamsTotal" :page.sync="pmParams.pageNum" :limit.sync="pmParams.pageSize"
      @pagination="getlbList" />
    </div>
      </el-dialog>
  </div>
</template>

<script>
 import { regionList } from "@/api/qu/byjx";
  export default {
    name: "StudentCheck",
    data() {
      return {
        // 查询参数
        queryParams: {
          nature:'',
          type:'',
        },
        // 查询参数
        querys: {
          pageNum: 1,
          pageSize: 10,
          nature:'',
          type:'',
        },
        pmParams:{
          pageNum: 1,
          pageSize: 10,
        },
        analysisDataShow:true,
        pmParamsTotal:0,
        querystotal:0,
        loading:false,
        typeOptions:[],
        pmData:[],
        schoolNatureOptions:[],
        schoolTypeOptions:[],
        charts:null,
        charts2:null,
        open:false,
        activeName: 'first',
        facilityList:[],
        analysisData:[],
        analysislb:[],
        legendData:['国家级','省市级','区县级',],
        legendSelected:{
             '国家级':true,
             '省市级':false,
             '区县级':false,
        },
      };
    },
    created() {
       this.getDicts("park_type").then(response => {
        this.schoolTypeOptions = response.data;
      });
       this.getDicts("school_nature").then(response => {
        this.schoolNatureOptions = response.data;
      });

    },
    mounted(){
      this.charts = this.$echarts.init(this.$refs.chartpDom);
      this.getList();
      this.getlbList();
      window.addEventListener("resize", this.monitorResize);
      // this.charts2 = this.$echarts.init(this.$refs.chartpDom2);
      // this.chartsFun();
      // this.chartsFun2()
    },

    methods: {
     async getList(){
          try {
            const obj={
              nature:this.queryParams.nature,
              schoolType:this.queryParams.type,
            };
           const data =  await regionList(obj);
           if( data.rows.length){
              this.analysisDataShow=true;
              this.analysisData= data.rows.map(item=>{
               return {
                 name:item.schoolName,
                 level1:item.level1,  //国家级
                 level2:item.level2, //省市级
                 level3:item.level3,   //区县级
               }
              })
          }else{
              this.analysisDataShow=false;
              this.analysisData=[]
             }
            this.chartsFun()

          } catch (error) {
            console.log(error);
          }
      },
     async getlbList(){
      this.loading=true;
        try {
            const obj={
              nature:this.querys.nature,
              schoolType:this.querys.type,
              pageNum: this.querys.pageNum,
              pageSize: this.querys.pageSize,
            };
           const data =  await regionList(obj);
           this.analysislb=data.rows;
           this.querystotal=data.total;
           this.loading=false;
          } catch (error) {
            console.log(error);
          }
      },
      //排名数据
      async getpmData(){
        this.loading=true;
        try {
          const obj={
              nature:this.queryParams.nature,
              schoolType:this.queryParams.type,
              pageNum: this.querys.pageNum,
              pageSize: this.querys.pageSize,
            };
           const data =  await regionList(obj);
           this.pmData=data.rows;
           this.pmParamsTotal=data.total;
           this.loading=false;
          } catch (error) {
            console.log(error);
          }
      },
      onRanking(){
         this.getpmData()
         this.open=true;
      },
         /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
       /** 重置按钮操作 */
       resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
       /** 搜索按钮操作 */
       handleQueryLb() {
        this.querys.pageNum = 1;
        this.getlbList();
      },
       /** 重置按钮操作 */
       resetQueryLb() {
        this.resetForm("query");
        this.handleQueryLb();
      },
      handleClick(tab, event) {
        this.analysisDataShow=true;
        // console.log(tab.label);
        if(tab.label=='图表'){
          this.queryParams={
            nature:'',
            type:'',
          }
          this.getList();
          this.$nextTick(()=>{
             this.charts.resize();
         })
        }else{
          this.analysislb=[]
          this.querys.pageNum = 1;
          this.querys.pageSize = 10;
          this.querys= {
          pageNum: 1,
          pageSize: 10,
          nature:'',
          type:'',
        },
          this.getlbList();
        }
      },
            // 序号
      customeIndex(index){
         return index+1+(this.querys.pageNum-1)*this.querys.pageSize
      },
      customeIndexPm(index){
        return index+1+(this.pmParams.pageNum-1)*this.pmParams.pageSize
      },
        // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
      chartsFun(){

          const option = {
         // backgroud:'#333',
         title: {
           text: '园所获奖统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:12/this.analysisData.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.analysisData.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'20%',
              data:this.legendData,
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.analysisData.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '国家级',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.analysisData.map(item=>item.level1)
              },
              {
                  name: '省市级',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.analysisData.map(item=>item.level2),
              },
              {
                  name: '区县级',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.analysisData.map(item=>item.level3),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.charts.setOption(option);
            window.addEventListener("resize", this.monitorResize);
      },
       //地图监听窗口缩放事件
       monitorResize(){
        this.charts.resize();
      },
    }
  };
</script>
<style lang="scss" scoped>
      .charts{
          // display: flex;
          // justify-content: space-between;
          margin-top: 50px;
          width:100%;
          height: 600px;
          // border: 1px red solid;
        .ranking{
          margin-top: -20px;
          width:85%;
          text-align: right;
        }
          .map_dom{
              width:90%;
              height:600px;
              margin-bottom: 50px;
          }
          .noData{
            margin-top: 50px;
            text-align: center;
          }
      }
</style>
